<template>
  <!-- 手机底部菜单（别问我为什么把现成的组件又封了一个自定义组件，问就是为了试试子传父、父传子、子调父、父调子） -->
  <van-tabbar
    v-model="active"
    @change="onChange"
    active-color="#24657D"
    inactive-color="#323233"
  >
    <van-tabbar-item icon="wap-home" to="/phone/index">首页</van-tabbar-item>
    <van-tabbar-item icon="font" to="/phone/gossip">杂谈</van-tabbar-item>
    <van-tabbar-item icon="comment" to="/phone/placeFile">归档</van-tabbar-item>
    <van-tabbar-item icon="friends" to="/phone/personal">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts" setup>
import { defineExpose, defineProps } from "vue";
import {
  // 这里是方法
  Mounted,
  getIndexDataList,
  getOtherData,
  getPlaceFileData,
  getPersonalData,
  getUserSessionData,
  onChange,
  test,
  // 这里是变量
  active,
} from "/@/assets/js/components/phone/Menu";
// ====================================================
// 将组件中的属性暴露出去，这样父组件可以调用
defineExpose({
  getIndexDataList,
  getOtherData,
  getPlaceFileData,
  getPersonalData,
});
// ====================================================
// 接受父组件  传递来的参数
const props = defineProps({
  activeDefine: {
    type: String,
    default: "",
  },
});
// 父组件传递来的参数赋值 子组件中的参数
active.value = parseInt(props.activeDefine);
console.log(props);
// ====================================================
// 测试参数传递
test(props.activeDefine);
// ====================================================
// 调用生命周期函数
Mounted();
</script>
